<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>用户个人信息</title>
  <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
  <link rel="stylesheet" href="/static/include/css/style.css">
  <style>
    /*#uploadFace {
      position: relative;
      width: 320px;
      overflow: hidden;
    }
    #uploadFace #ipt_face {
      filter: alpha(opacity=0);
    }
    #uploadFace .mask{
      width:100%;
      height:128px;
      position:absolute;
      top:0;
      left:0;
      z-index:998;
    }
    #uploadFace:hover .mask {
      background-color: #000;
      filter: alpha(opacity=50);
      cursor:pointer;
    }
    #uploadFace:hover .mask-content {
      filter: alpha(opacity=100);
      cursor: pointer;
    }
    .mask-content {
      width: 100%;
      height: 68px;
      padding-top: 60px;
      color: white;
      position: absolute;
      font-size: 14px;
      font-weight: 600;
      z-index: 999;
      background: url(/static/img/locked.png) no-repeat;
      background-position: center 30px;
      filter: alpha(opacity=0);
    }*/
  </style>
</head>

<body class="gray-bg"
      style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
  <div class="">
<!--    <div class="col-sm-3 pr5">-->
<!--      <div class="ibox float-e-margins">-->
<!--        <div class="ibox-title ibox-title-gray dashboard-header gray-bg">-->
<!--          <h5>个人资料</h5>-->
<!--        </div>-->
<!--        <div class="ibox-content" id="infoBox">-->

<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <div class="col-sm-13 about">
      <div class="ibox float-e-margins">
        <div class="ibox-title ibox-title-gray dashboard-header">
          <h5>基本资料</h5>
        </div>
        <div class="ibox-content">
          <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#user_info" data-toggle="tab" aria-expanded="true">基本资料</a></li>
            </ul>
            <div class="tab-content">
              <!--用户信息-->
              <div class="tab-pane active" id="user_info">
                <form class="form-horizontal" id="form-user-edit">
                  <!--隐藏ID-->
<!--                  <input type="hidden" id="userId" th:field="*{userId}"/>-->
                  <div class="form-group">
                    <label class="col-sm-2 control-label">登录名：</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="loginname" field="username" maxlength="30" readonly>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label">手机号：</label>
                    <div class="col-sm-10">
                      <input type="text" class="form-control" name="phone" maxlength="11" field="phone">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-sm-2 control-label">头像：</label>
                    <div class="col-sm-10">
                      <p>
                        <img  onclick="_avatar()" id="headerUrl" class="img-circle img-lg" src="" onerror="onerror=null;src='/static/img/user_w.jpeg'">
                        <input type="hidden" name="avatar" field="avatar" id="avatar"/>
                      </p>
                    </div>
                  </div>




                  <!--<div id="uploadFace" >
                    <p class="mask"></p>
                    <p class="mask-content">更换头像</p>
                    <input type="file" id="ipt_face" accept="image/*" />
                  </div>
-->


<!--                  <div class="form-group">-->
<!--                    <label class="col-sm-2 control-label">邮箱：</label>-->
<!--                    <div class="col-sm-10">-->
<!--                      <input type="text" class="form-control" name="email" th:field="*{email}" maxlength="70"-->
<!--                             placeholder="请输入邮箱">-->
<!--                    </div>-->
<!--                  </div>-->
                  <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                      <button type="button" class="btn btn-sm btn-primary" onclick="submitUserInfo()">
                        <i class="fa fa-check"></i>保 存
                      </button>&nbsp;
                      <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()">
                        <i class="fa fa-reply-all"></i>关 闭
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<script id="infoTpl" type="text/html">
  <div class="text-center">
    <p>
      {{# if(d.avatar){ }}
      <img class="img-circle img-lg" src="{{ d.avatar }}" onerror="onerror=null;src='/static/img/user_w.jpeg'">
      {{# } else { }}
      <img class="img-circle img-lg" src="/static/img/user_w.jpeg">
      {{# } }}
    </p>
    <p><a onclick="avatar()">修改头像</a></p>
  </div>
  <ul class="list-group list-group-striped">
    <li class="list-group-item"><i class="fa fa-user"></i>
      <b class="font-noraml">登录名称：</b>
      <p class="pull-right">{{ d.username }}</p>
    </li>
    <li class="list-group-item"><i class="fa fa-phone"></i>
      <b class="font-noraml">手机号码：</b>
      <p class="pull-right">{{ d.phone }}</p>
    </li>
<!--    <li class="list-group-item"><i class="fa fa-envelope-o"></i>-->
<!--      <b class="font-noraml">邮箱地址：</b>-->
<!--      <p class="pull-right" title="{{d.email}}">{{d.email}}</p>-->
<!--    </li>-->
<!--    <li class="list-group-item"><i class="fa fa-group"></i>-->
<!--      <b class="font-noraml">所属部门：</b>-->
<!--      <p class="pull-right">{{d.deptName}}</p>-->
<!--    </li>-->
<!--    <li class="list-group-item"><i class="fa fa-calendar"></i>-->
<!--      <b class="font-noraml">创建时间：</b>-->
<!--      <p class="pull-right">[[${#dates.format(user.createTime, 'yyyy-MM-dd')}]]</p>-->
<!--    </li>-->
  </ul>
</script>
<script src="/static/include/js/footer.js"></script>
<script src="/static/ajax/libs/layui/lay/modules/laytpl.js"></script>
<script src="/static/js/jquery.form.min.js"></script>
<script src="/static/pages/home/myprofile.js"></script>
<script>
  $(function () {
    $(".mask-content").click(function () {
      $("#ipt_face").click();
    })

    $("#ipt_face").change(function () {
      var fileobj = document.getElementById("ipt_face");
      fileobj.select();
      //需要失去焦点，不然下一步会报错：无法访问
      fileobj.blur();
      var url = document.selection.createRange().text;
      //下行的replace是将获取到的路径反斜杠替换为正斜杠
      document.getElementById("uploadFace").style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(src = '" + url.replace(/\\/g, "/") + "', sizingMethod = 'scale')";
    })
  })
</script>
</body>
</html>